<template>
    <view class="cart-page">
        <!-- 购物车列表 -->
        <view class="cart-list">
            <uni-swipe-action v-for="(item, index) in cartList" :key="item.id">
                <uni-swipe-action-item :right-options="swipeOptions" @click="deleteItem(index)">
                    <view class="cart-item">
                        <!-- 左侧选择框 -->
                        <view class="item-select" @click="toggleSelect(index)">
                            <uni-icons :type="item.selected ? 'checkbox-filled' : 'circle'"
                                :color="item.selected ? '#ff5500' : '#999'" size="20"></uni-icons>
                        </view>

                        <!-- 商品图片 -->
                        <image class="item-image" :src="getImagePath(item)" mode="aspectFill"></image>

                        <!-- 商品信息 -->
                        <view class="item-info">
                            <text class="item-title">{{ item.name }}</text>
                            <text class="item-spec">原价:<text style="text-decoration: line-through;">¥{{ parseFloat(item.price) }}</text></text>
                            <view class="item-bottom">
                                <text class="item-price">¥{{getDiscountedPrice(item)  }}</text>
                                <uni-number-box :min="1" :value="item.count"
                                    @change="(val) => changeQuantity(index, val)" />
                            </view>
                        </view>
                    </view>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>

        <!-- 底部操作栏 -->
        <view class="cart-footer">
            <view class="footer-left" @click="toggleAll">
                <uni-icons :type="isAllSelected ? 'checkbox-filled' : 'circle'"
                    :color="isAllSelected ? '#ff5500' : '#999'" size="20"></uni-icons>
                <text>全选</text>
            </view>

            <view class="footer-right">
                <view class="total-price">
                    合计：<text class="price">¥{{ totalPrice }}</text>
                </view>
                <button class="settle-btn" :class="{ disabled: selectedCount === 0 }" @click="handleSettle">
                    结算({{ selectedCount }})
                </button>
            </view>
        </view>
        <tab-bar :current-index="2" />
    </view>
</template>

<script>
    import tabBar from '@/components/tabBar.vue';
    import {isLogin} from '@/tools/tools.js'
    import {getShoppingCarPagination} from '@/apis/shoppingCar.js'
import cf from '../../tools/cf';
    export default {
        components:{tabBar},
        data() {
            return {
                swipeOptions: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#ff5500'
                    }
                }],
                cartList: [],
                pagination:{
                    page:1,
                    limit:10
                },
                total:0
            }
        },
        computed: {
            // 是否全选
            isAllSelected() {
                return this.cartList.length > 0 &&
                    this.cartList.every(item => item.selected)
            },
            // 总价
            totalPrice() {
                return this.cartList.reduce((total, item) => {
                    return item.selected ? total + parseFloat(this.getDiscountedPrice(item)) * item.count : total
                }, 0).toFixed(2)
            },
            // 选中数量
            selectedCount() {
                return this.cartList.filter(item => item.selected).length
            }
        },
        methods: {
            getDiscountedPrice(item){
                return parseFloat((item.price*item.discount/100)-item.deduction).toFixed(2)
            },
            // 切换单个商品选中状态
            toggleSelect(index) {
                this.cartList[index].selected = !this.cartList[index].selected
                this.cartList = [...this.cartList]
            },
            // 切换全选
            toggleAll() {
                const selectStatus = !this.isAllSelected
                this.cartList = this.cartList.map(item => ({
                    ...item,
                    selected: selectStatus
                }))
            },
            // 修改商品数量
            changeQuantity(index, value) {
                this.cartList[index].count = value
                this.cartList = [...this.cartList]
            },
            // 删除商品
            deleteItem(index) {
                uni.showModal({
                    title: '提示',
                    content: '确定要删除该商品吗？',
                    success: (res) => {
                        if (res.confirm) {
                            this.cartList.splice(index, 1)
                        }
                    }
                })
            },
            // 结算
            handleSettle() {
                if (this.selectedCount === 0) {
                    uni.showToast({
                        title: '请选择商品',
                        icon: 'none'
                    })
                    return
                }
                // 实际开发中跳转到结算页面
                uni.navigateTo({
                    url: '/pages/order/confirm'
                })
            },
            getImagePath(item) {
                switch (item.productCategory) {
                    case "sys_car_supplies":
                        return cf.BASE_URL + "/Images/Product/CarSupplies/" + item.productId + "/" + item.images.split(',')[0]
                    case "car_services":
                        return cf.BASE_URL + "/Images/Product/CarServices/" + item.productId + "/" + item.images.split(',')[0]
                    default:
                        return ""
                }
            }
        },
        async mounted(){
            const res=await getShoppingCarPagination(this.pagination);
            if(res.code>=0){
                this.cartList=res.data.data;
                this.total=res.data.total;
            }
        },
        onShow: () => {
            isLogin()
        }
    }
</script>

<style scoped>
    .cart-page {
        padding-bottom: 100rpx;
    }

    .cart-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background: #fff;
        border-bottom: 1rpx solid #eee;
    }

    .item-select {
        padding: 0 20rpx;
    }

    .item-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
    }

    .item-info {
        flex: 1;
        padding-left: 20rpx;
    }

    .item-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
    }

    .item-spec {
        font-size: 24rpx;
        color: #999;
    }

    .item-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
    }

    .item-price {
        color: #ff5500;
        font-size: 32rpx;
    }

    .cart-footer {
        position: fixed;
        bottom: 100rpx;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, .1);
    }

    .footer-left {
        display: flex;
        align-items: center;
        font-size: 28rpx;
    }

    .footer-right {
        display: flex;
        align-items: center;
    }

    .total-price {
        margin-right: 30rpx;
        font-size: 28rpx;
    }

    .price {
        color: #ff5500;
        font-size: 32rpx;
    }

    .settle-btn {
        background: #ff5500;
        color: #fff;
        font-size: 28rpx;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 60rpx;
        border-radius: 40rpx;
    }

    .settle-btn.disabled {
        background: #ccc;
        opacity: 0.6;
    }
</style>